<template>
	<view>
		<!-- 顶部的导航 -->
		<uni-nav-bar background-color="#e32519" color="#fff5f1" status-bar="true" fixed="true"
			@clickLeft="clickNavLeft()" @clickRight="clickNavRight()">
			<!-- 左侧插槽 -->
			<view slot="left" style="display: flex;justify-content: space-between;">
				<image style="width: 110rpx;height: 50rpx;" src="../../static/xuexi.png"></image>
			</view>
			<u-search height="50rpx" placeholder="每日科普" placeholderColor="#eceae9" bgColor="#ec857b" :animation="true"
				searchIconColor="#eceae9"></u-search>
			<!-- 右侧插槽 -->
			<!-- 			<view style="width: 25%; margin-left: 30rpx;display: flex ;justify-content:space-between;">
				<view style="font-size: 8px;padding-top: 14rpx;">积分</view>
				<view style="padding: 22rpx 0 0 12rpx;font-size: 20px;">1253</view>
			</view> -->
			<view slot="right"><text style="font-size: 16px;">我的</text></view>
		</uni-nav-bar>

		<!-- 导航可滚动标签 -->
		<scroll-view v-for="item in tabList">
			<u-tabs style=" width:400px; background-color: #ffeee6;position:fixed;z-index: 1;" lineColor="red"
				lineWidth="25" lineHeight="2" activeStyle="color:red;" :list="tabList" @click="selectType"></u-tabs>
		</scroll-view>

		<!-- 页面主要内容 -->
		<view  v-for="item in shuju" class="album__content" @click="toDetail(item.id)">
	
		
			<view v-if="active==2" >
				<card style="z-index:1;" :src="item.img_url" :text="item.content"></card>
			</view>
			<view v-else>
				<image :src="item.img_url" mode="scaleToFill" style="width: 100%;"></image>
				<view style="padding:3% 5% 3% 6%;">
					<text class="h55" style="font-size:12;">{{item.content}}</text>
				</view>
				<view style="display: flex;justify-content:space-between;padding:0% 5% 3% 6%;width: 90%;">
					<view>
						<text  style="font-size:12; color:#a6a6a7;">{{item.title}}</text>
					</view>
					<view style="display: flex;justify-content:space-between;width: 30%;">
						<view style="display: flex;justify-content:flex-start;">
							<u-icon name="chat-fill" color="#a6a6a7" size="16"></u-icon>
							<text  style="font-size:12; color:#a6a6a7;">{{item.pinlun}}</text>
						</view>
						<view>
							<text style="font-size:12; color:#a6a6a7;">{{item.detetime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部自定义导航-->
		<u-tabbar :value="value4" @change="name => value4 = name" :fixed="true" :placeholder="true"
			activeColor="#d81e06" :safeAreaInsetBottom="true">
			<!-- 强国通 -->
			<u-tabbar-item text="强国通" badge="3" @click="go1()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/qgt2.png">
				</image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/qgt.png"></image>
			</u-tabbar-item>
			<!-- 百灵 -->
			<u-tabbar-item text="百灵" @click="go2()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/bl2.png"></image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/bl.png"></image>
			</u-tabbar-item>
			<!-- 中间图标 -->
			<u-tabbar-item @click="go3()">
				<image style="width: 80rpx;height: 80rpx;" slot="active-icon" src="../../static/tab.png"></image>
				<image style="width: 80rpx;height: 80rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tab_select.png"></image>
			</u-tabbar-item>
			<!-- 电视台 -->
			<u-tabbar-item text="电视台" @click="go4()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/dst2.png">
				</image>
				<image style="width: 40rpx;height:40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/dst.png"></image>
			</u-tabbar-item>
			<!-- 电台 -->
			<u-tabbar-item text="电台" @click="go5()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/dt2.png"></image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/dt.png"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		friendlyDate
	} from "../../common/util.js";
	export default {
		data() {
			return {
				value4: 1,
				albumWidth: 0,
				tabList: [{
						type: "2",
						id: "tab01",
						name: '推荐'
					},
					{
						type: "2",
						id: "tab02",
						name: '党史'
					},
					{
						type: "2",
						id: "tab03",
						name: '竖'
					},
					{
						type: "2",
						id: "tab04",
						name: '炫'
					},
					{
						type: "1",
						id: "tab05",
						name: '窗'
					},
					{
						type: "1",
						id: "tab06",
						name: '藏'
					},
					{
						type: "1",
						id: "tab07",
						name: '靓'
					},
					{
						type: "1",
						id: "tab08",
						name: '秀'
					},
					{
						type: "1",
						id: "tab09",
						name: '熊猫'
					}

				],
				shuju: [],
				active: 0

			}

		},
		methods: {
			selectType(index) {

				this.active = index.index
				this.requestNewsList()

			},
			toDetail(id) {
				console.log(id)
				if (this._isWidescreen) {
					console.log('宽屏触发')
					uni.$emit('updateDetail', {
						detail:id
					})
				} else {
					uni.navigateTo({
						url: "../news/detail?id=" + id
					})
				}

			},
			go1() {
				uni.navigateTo({
					url: "../qgt/qgt"
				})
			},
			go2() {
				uni.navigateTo({
					url: "../bl/bl"
				})

			},
			go3() {
				uni.navigateTo({
					url: "../xuexi/xuexi"
				})
			},
			go4() {
				uni.navigateTo({
					url: "../dst/dst"
				})
			},
			go5() {
				uni.navigateTo({
					url: "../dt/dt"
				})
			},


			requestNewsList() {
				uni.request({
					method: 'post',
					url: 'http://127.0.0.1:3000/news',
					data: {
						type: this.active
					},
					success: res => {
						console.log(res.data)
						this.shuju = res.data
						for (var index in res.data) {
							res.data[index].detetime = friendlyDate(new Date(res.data[index].detetime))
						}
					}
				})
			}

		},

		onLoad() {
			// #ifdef H5
			var mediaQueryOb = uni.createMediaQueryObserver(this)
			mediaQueryOb.observe({
				minWidth: 768
			},matches => {
				this._isWidescreen = matches;
			})
			if (this._isWidescreen) {
				uni.hideTabBar({})
			}
			// #endif
			
			this.requestNewsList()


		}
	}
</script>

<style lang="scss">
	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-top: 50px;
			margin-left: 0px;
			flex: 1;
		}
	}
	 #ifdef H5
	.h55{
		color:#0055ff;
	}
	 #endif
	
	page {
	  height: 100%;
	}
	


</style>
